<template>
  <div id="globalHeader">
    <a-menu
      mode="horizontal"
      theme="dark"
      :selected-keys="selectedKey"
      @menu-item-click="doMenuClick"
    >
      <a-menu-item key="0" :style="{ padding: 0, margin: 0 }" disabled>
        <div class="title-bar">
          <img src="../../public/高速上的尼伯龙根.jpg" height="50px" />
          <div>加密项目</div>
        </div>
      </a-menu-item>
      <a-menu-item v-for="item in routes" :key="item.path">
        {{ item.name }}
      </a-menu-item>
    </a-menu>
  </div>
</template>
<script lang="ts" setup>
import { routes } from "@/router/routes";
import { useRoute, useRouter } from "vue-router";
import { ref } from "vue";

const router = useRouter();
const route = useRoute();

const doMenuClick = (key: string) => {
  router.push({
    path: key,
  });
};
const selectedKey = ref<string[]>([route.path]);

router.afterEach((to, from, failure) => {
  selectedKey.value = [to.path];
});
</script>
<script lang="ts">
export default {
  name: "GlobalHeader",
};
</script>

<style scoped>
.title-bar {
  display: flex;
  align-items: center;
  font-size: xx-large;
  font-weight: 800;
  color: rgb(255, 255, 255);
}

.title-bar img {
  margin-right: 10px;
}

#globalHeader {
  box-shadow: #eee 1px 1px 5px;
}
</style>
<style>
#globalHeader .arco-menu-inner {
  display: flex;
  align-items: center;
  padding: 6px 10px;
}
</style>
